<template>
	<view class="main">
		<!-- 顶部自定义导航 -->
		<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="false" :background="{ backgroundColor: '#ed4141' }"
		 :back-text-style="{color: '#fff'}" :title="$t('index.title')">
			<view class="slot-wrap">
				<view class="map-wrap" @click="show=true">
					<u-icon name="map-fill" color="#ffffff" size="24"></u-icon>
					<text class="map-wrap-text">{{$t('index.country')}}</text>
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<view class="message-box right-item" @click="typeClick">
					<u-icon name="edit-pen" color="#ffffff" size="50"></u-icon>
				</view>
			</view>
		</u-navbar>
		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	import {
		setLanguage,
		getLanguage,
		getToken
	} from '@/util/tokeCookien.js'
	import BottomImageMenu from '@/components/zh-bottom-image-menu/zh-bottom-image-menu.js'
	var bottomImageMenu = null
	export default {
		computed: {
			menus() { 
				return [{
						icon: '/static/tubiaozhizuomoban.png',
						label: this.$i18n.messages[this.$i18n.locale].index.makeHeadlines
					},
					{
						icon: '/static/icon_A.png',
						label: this.$i18n.messages[this.$i18n.locale].index.PostArticles
					},
					{
						icon: '/static/xiangji.png',
						label: this.$i18n.messages[this.$i18n.locale].index.TakeALittleVideo
					},
					{
						icon: '/static/shipin.png',
						label: this.$i18n.messages[this.$i18n.locale].index.SendShortVideo
					},
					{
						icon: '/static/liveshipinzhibo.png',
						label: this.$i18n.messages[this.$i18n.locale].index.liveBroadcast
					}
				]
			}
		},
		
		onLoad() {
			if (!getLanguage()) {
				setLanguage(1)
			}
		},
		data() {
			return {
				list: [{
					text: '中国'
				}, {
					text: 'English'
				}],
				show: false
			}
		},
		onShow() {
			let id = getLanguage() - 1
			this.click(id)
			/* bottomImageMenu = new BottomImageMenu(menus) */
		},
		methods: {
			click(index) {
				if (index == 0) {
					this.$i18n.locale = 'zh-CN';
					plus.storage.setItem('locale', 'zh-CN');
				} else {
					this.$i18n.locale = 'en';
					plus.storage.setItem('locale', 'en');
				}
				this.country = this.list[index].text
				setLanguage(index + 1)
				this.changeType() 
				// 修改底部导航
				uni.setTabBarItem({
					index: 0,
					text: this.$i18n.messages[this.$i18n.locale].tabBar.home
				});
				uni.setTabBarItem({
					index: 1,
					text: this.$i18n.messages[this.$i18n.locale].tabBar.video
				});
				uni.setTabBarItem({
					index: 2,
					text: this.$i18n.messages[this.$i18n.locale].tabBar.Me
				});
			},
			changeType() {
				this.$emit("pChangeType")
			},
			typeClick() {
				const _this = this
					bottomImageMenu = new BottomImageMenu(_this.menus, (menu, index) => {
						if(!getToken()){
							_this.$showModalLogin()
						}else{if (index == 0) {
							uni.navigateTo({
								url: '/pages/headlines/headlines'
							});
						} else if (index == 1) {
							uni.navigateTo({
								url: '/pages/article/article'
							});
						} else if (index == 2) {
							uni.navigateTo({
								url: '/pages/shortvideo/shortvideo'
							});
						} else if (index == 3) {
							uni.navigateTo({
								url: '/pages/smallvideo/smallvideo'
							});
						} else if (index == 4) { 
							uni.showToast({
								title: '功能尚未上线，敬请期待',
								icon: 'none'
							});
							/* uni.navigateTo({
								url: '/pages/tui/tui'
							}) */
							/* uni.navigateTo({
								url: '/pages/livebroadcast/livebroadcast'
							}); */
						}
						}
						bottomImageMenu.close() //点击图标后取消底部菜单
						/* uni.showToast({
							title: `点击了:${menu.label},索引是${index},这是统一处理的`,
							icon: 'none'
						}) */
					})
				bottomImageMenu.show()
			}
		}
	}
</script>

<style lang="scss">
	// padding-bottom:120rpx;box-sizing: border-box;重要*************************保证页面底部内容不被隐藏也不会出现多余的滚动条
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240, 240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}

	.map-wrap-text {
		padding: 0 6rpx;
	}

	.right-item {
		margin: 0 30rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
</style>
